<template>
  <div class="Emergency">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EmergencyResources' }">应急资源</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="Emergency-center">
      <div class="Emergency_top">
        <div class="leftMap resourtCommon">
          <MapContent />
        </div>
        <div class="right_main">
          <div class="team_box">
            <resourceTeam @dialogShow="dialogShow"></resourceTeam>
          </div>
          <div class="vehicle_box">
            <resourceVehicle @dialogShow="dialogShow"></resourceVehicle>
          </div>
          <div class="equipment_box">
            <resourceEquipment></resourceEquipment>
          </div>
        </div>
      </div>
      <div class="Emergency_bottom">
        <resourcePie></resourcePie>
      </div>
    </div>
    <LsdDialog :dialogConfig="dialogParticulars" @close="closeDialog">
      <div slot="dialog" style="height: 100%;">
        <DexTable ref="particularsTable" :config="dialogConfig" :data="dialogData" :withPage="false" height="100%" />
      </div>
    </LsdDialog>
  </div>
</template>

<script>
import MapContent from "./components/resourceMap.vue";
import resourceTeam from "./components/resourceTeam.vue";
import resourceVehicle from "./components/resourceVehicle.vue";
import resourceEquipment from "./components/resourceEquipment.vue";
import resourcePie from "./components/resourcePie.vue";
import { dwColums, clColums } from "../SystemHomepage/HomePageContent/columns";
import { getResourceDetails } from "@/api/EmergencyResources/EmergencyResources.js";
import DexTable from "@/components/DexTable.vue";
export default {
  components: {
    resourceTeam,
    resourceVehicle,
    resourceEquipment,
    resourcePie,
    MapContent,
    DexTable
  },
  data() {
    return {
      dwColums,
      clColums,
      dialogParticulars: {
        title: "",
        isShow: false,
        btnList: []
      },
      dialogConfig: [],
      dialogData: []
    };
  },
  methods: {
    async dialogShow(data) {
      console.log(data);
      let pas = {
        pageNum: 1, pageSize: 100, orgId: data.orgId, categoryName: data.categoryName, state: data.state
      };
      if (data.categoryName === "1") {
        if (data.state === 1) {
          pas = {
            pageNum: 1, pageSize: 100, orgId: data.orgId, categoryName: data.categoryName, type: "sy"
          };
        }
        this.dialogConfig = clColums;
        this.dialogParticulars.title = "资源台账-车辆";
      } else if (data.categoryName === "3") {
        if (data.state === 1) {
          pas = {
            pageNum: 1, pageSize: 100, orgId: data.orgId, categoryName: data.categoryName, type: "sy"
          };
        }
        this.dialogConfig = dwColums;
        this.dialogParticulars.title = "资源台账-队伍";
      }
      const res = await getResourceDetails(pas);
      if (res) {
        if (data.categoryName === "1") {
          this.dialogData = res.vehicleList.data;
        } else {
          this.dialogData = res.teamList.data;
        }
        this.dialogParticulars.isShow = true;
      }
    },

    closeDialog() {
      this.dialogParticulars.isShow = false;
    }
  }
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.resourtCommon {
  border: 1px solid #0649d7;
}

.Emergency {
  width: 100%;
  height: 95%;
  margin: 0;

  .Emergency-center {
    width: 100%;
    height: 100%;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .Emergency_top {
      width: 100%;
      height: 58%;
      display: flex;
      justify-content: space-between;

      .leftMap {
        width: 39.2%;
        height: 100%;
      }

      .right_main {
        flex: 1;
        height: 100%;
        display: flex;
        justify-content: space-between;
        margin-left: 20px;

        .team_box,
        .vehicle_box,
        .equipment_box {
          width: 32%;
          height: 100%;
        }
      }
    }

    .Emergency_bottom {
      width: 100%;
      height: 40%;
    }
  }
}
</style>
